<template>
	<view class="container">
		<view class="banner">
			<image src="/static/img/course-banner.png" mode="widthFix" />
		</view>
		<view class="section">
			<view class="p-40">
				<view class="section__title">课程</view>
				<view class="section__entitle mt-20">Courses</view>
			</view>
			<view class="section-content">
				<block v-for="(item, index) in course.directory" :key="index">
					<uv-line color="#bfbfbf"></uv-line>
					<view class="course">
						<view class="course__title">
							<image src="/static/img/dian.png" />
							<view>{{ item.name }}</view>
						</view>
						<view style="width: 120rpx" v-if="item.free_switch === 1">
							<uv-button
								type="primary"
								text="试看"
								size="small"
								shape="circle"
								@click="$tools.handleJump('CourseLesson', { id: item.id })"
							></uv-button>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view style="height: 80rpx"></view>
		<view class="buy-btn">
			<uv-button
				type="primary"
				text="报名"
				shape="circle"
				@click="$tools.handleJump('Apply', { course_id: course.id, course_name: course.name })"
			></uv-button>
		</view>
	</view>
</template>

<script>
import { getCourseDirectory } from '@/api/index';

export default {
	data() {
		return {
			title: 'Hello',
			id: 1,
			course: {},
		};
	},
	onShareAppMessage() {},
	onShareTimeline() {},
	onLoad() {
		this.getInit();
	},
	onShow() {},
	onReachBottom() {},

	onPullDownRefresh() {},
	methods: {
		getInit() {
			//课程目录
			const param = {
				id: this.id,
			};
			getCourseDirectory(param).then((res) => {
				console.log(res);
				this.course = res.data;
			});
		},
	},
};
</script>

<style lang="scss">
@import 'index.scss';
</style>
